<template>
	<up-scroll-list
		title-t="sports.hotLeague"
		icon="zd-super"
		icon-color="var(--color-warning)"
		key="sport_recommend"
		:total="list.length"
		:multiple="3">
		<base-image
			v-for="item in list"
			:key="item.leagueId"
			:src="item.icon"
			default="placeholder"
			type="server"
			rounded
			class="w-full cursor-pointer app-hover-offset"
			@click="onClick(item)"></base-image>
	</up-scroll-list>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { BaseImage } from '@/components/base'
import { UpScrollList } from '@/components/up'
import { useSportsStore } from '@/store'
import { LeagueType } from '@/types'
import { goSportsLeague } from '@/utils'

const sportsStore = useSportsStore()

const list = computed(() => sportsStore.hotLeagues)

const onClick = (item: LeagueType) => goSportsLeague(item.sportId, item.leagueId)
</script>
